<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <wx-tables
    :columns="columns"
    title="角色管理"
    :data-source="dataSource"
    :loading="loading"
    :total="total"
    :size.sync="size"
    :page.sync="page"
    @handlePage="handlePage"
  >
    <!-- tools -->
    <template #tools>
      <el-button type="primary" class="table-btn" @click="handleOpenForm()">添加角色</el-button>
      <!--      <el-button class="table-btn" icon="el-icon-refresh-right" @click="handleGetTable">刷新</el-button>-->
    </template>
    <template v-slot:permission_pluck="record">
      <div style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
        <span v-if="!record.row.permission_pluck.length">-</span>
        <span v-for="(item,index) in record.row.permission_pluck" :key="index"> {{item}} &nbsp;</span>
      </div>
    </template>
    <template v-slot:status="record">
      <el-switch
        v-model="record.row.status"
        :active-value="1"
        :inactive-value="0"
        active-color="#409EFF"
        inactive-color="#C0CCDA"
        @change="handleSetStatus(record.row)">
      </el-switch>
    </template>
    <template v-slot:oper="record">
      <div class="oper-box">
        <span><el-link type="primary" @click="handleEit(record.row)">编辑</el-link></span>
        <el-popconfirm
          title="确定删除当前角色吗？"
          @confirm="handleDelete(record.row.id)"
        >
          <el-link slot="reference" type="danger">删除</el-link>
        </el-popconfirm>
      </div>
    </template>
    <wx-dialog
      ref="wx-dialog"
      :visible.sync="formVisible"
      :is-add="isAdd"
      width="500px"
      @ok="handleSaveForm"
    >
      <div>
        <el-form ref="ruleForm" v-loading="formLoading" :rules="ruleForm" :model="formInfo" label-position="left" label-width="80px">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="formInfo.name" style="width: 200px;" placeholder="角色名称" />
          </el-form-item>
          <el-form-item label="角色权限" prop="permission_id_arr">
            <el-tree
              :data="roleList"
              show-checkbox
              default-expand-all
              :default-checked-keys="formInfo.permission_id_arr"
              node-key="id"
              ref="RoleTree"
              highlight-current
              @check="handleTree"
              :props="defaultProps">
            </el-tree>
          </el-form-item>
        </el-form>
      </div>
    </wx-dialog>
  </wx-tables>
</template>

<script>
import {
  getListByCon,
  rbacPermissionGetPermission, roleDelete,
  roleEdit
} from '@/api/role'
import WxDialog from '@/components/WxDialog'
import WxTables from '@/components/WxTables'
import TableMixins from '@/components/WxTables/mixins'
// import { ROlE_TYPE } from '@/views/constants'
export default {
  name: 'ManagerRole',
  components: {
    WxDialog,
    WxTables
  },
  mixins: [TableMixins],
  data() {
    return {
      pwdDialog: false,
      columns: [
        { config: { type: 'index', width: 100 }, label: '序号' },
        { dataIndex: 'name', label: '名称' },
        { dataIndex: 'permission_pluck', label: '模块权限', slots: true },
        { dataIndex: 'created_at', label: '创建时间' },
        // { dataIndex: 'status', label: '是否启用', slots: true },
        { dataIndex: 'oper', label: '操作', slots: true }
      ],
      markId: '',
      ruleForm: {
        name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ],
        permission_id_arr: [
          { required: true, message: '请选择权限', trigger: 'blur' }
        ]
      },
      formInfo: {},
      roleList: [],
      defaultProps: {
        children: 'menu',
        label: 'name'
      }
    }
  },
  watch: {
    formVisible(val) {
      if(val) {
        rbacPermissionGetPermission().then(res => {
          if(res.code === 200) {
            this.roleList = res.data
          }
        })
      }
    }
  },
  methods: {
    /**
     * 获取列表
     */
    getList() {
      getListByCon({page: this.page}).then(res => {
        if (this.pagination) {
          const { data, total } = res.data
          this.total = total
          this.dataSource = data
          this.cacheDataSource = JSON.parse(JSON.stringify(data))
        } else {
          this.dataSource = res.data
          this.cacheDataSource = JSON.parse(JSON.stringify(res.data))
        }
        this.handleSetCancelStatus?.()
        // this.handleCompleteTable()
      }).finally(() => {
        this.loading = false
      })
    },
    /**
     * 点击权限
     */
    handleTree() {
      this.formInfo.permission_id_arr = this.$refs.RoleTree.getCheckedKeys()
    },
    /**
     * 新增人员
     */
    createManager(idSend) {
      let form_info = JSON.parse(JSON.stringify(this.formInfo))
      form_info.permission_id_arr = this.$refs.RoleTree.getCheckedKeys().concat(this.$refs.RoleTree.getHalfCheckedKeys())
      roleEdit({ ...form_info, ...idSend })
        .then((res) => {
          if (res.code === 200) {
            this.$message.success(this.isAdd ? '添加成功' : '编辑成功')
            this.formInfo = {}
            this.formVisible = false
            this.handleGetTable()
          }
        }).finally(() => {
        this.handleResetDialog()
      })
    },
    /**
     * 更改人员状态
     */
    changeStatus(id,status) {
      // managerSetStatus({
      //   admin_town_id: id,
      //   status
      // }).then((res) => {
      //   if (res.code === 200) {
      //     this.$message.success(res.msg)
      //     this.handleGetTable()
      //   }
      // })
    },
    /**
     * 编辑
     * @param item
     */
    handleEit(item) {
      const { id, name, intro, permission } = item
      const permission_f_id = permission.reduce((cur,item) =>{
        if(!cur.includes(item.f_id)) {
          return cur.concat(item.f_id)
        }
        return cur
      } ,[])
      const permission_id_arr = permission.reduce((cur,item) => cur.concat(item.id) ,[])
        .filter(res =>{
        if(!permission_f_id.includes(res)) return res
      })
      this.markId = 'rbac_role_id'
      this.handleOpenForm(id,['name','intro','permission_id_arr'],{name,intro,permission_id_arr})
    },
    /**
     * 删除角色
     * @param role_ids
     */
    handleDelete(role_ids) {
      roleDelete({ role_ids }).then((res) => { if (res.code === 200) {
        this.$message.success(res.msg)
        this.handleGetTable()
      } })
    },
    /**
     * 翻页
     * @param val
     */
    handlePage(val) {
      this.page = val
    }
  }
}
</script>
<style lang="scss" src="./style/index.scss" scoped/>
